<%--
  Created by IntelliJ IDEA.
  User: 11875
  Date: 2021/11/3
  Time: 11:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍管理系统</title>
    <link rel="stylesheet" href="/css/homepageheder.css">
    <link rel="stylesheet" href="/css/tradmilsit.css">
    <link rel="stylesheet" href="/css/addinfo.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>

<body>
<!-- 头部 -->
<div class="heder">
    <div class="title">
        <div class="title_t">
            <span>宿 舍 管 理 系 统</span>
        </div>
        <div class="title_r">
            欢迎您！！！
            <c:if test="${user.typeid == 1}">
                班主任老师
            </c:if>
            <c:if test="${user.typeid == 2}">
                班主任老师
            </c:if>
            ${user.uname}
            <span>|</span>
            <a href="javascript:history.go(-1)">返回上一页</a>
            <span>|</span>
            <a href="/user/main">返回主页</a>
            <span>|</span>
            <a href="/user/updatepasswordpage">修改密码</a>
            <span>|</span>
            <a href="/logout">退出</a>
        </div>
    </div>
</div>


<div class="hr"></div>

<div id="content">
    <div class="container">
        <h3>添 加 班 级</h3>

        <form action="/classes/addclasses" method="post" onsubmit="return chkform(this)">
            <div class="classinput">
                <div class="classname">
                    <span>班级名称</span>
                    <%-- js方式使用ajax：onblur="chknamebyajax(this.value)"  --%>
                    <input type="text" id="cname" name="cname">
                    <div class="text-danger"></div>
                </div>
                <div class="grade">
                    <span>年级</span>
                    <input type="text" name="cgrade">
                    <div class="text-danger"></div>
                </div>
                <%--                <div class="teacher">--%>
                <%--                    <span>班主任</span>--%>
                <%--                    <select name="teacherid" id="teacher">--%>
                <%--                        <c:forEach items="${teacherlist}" var="teacher">--%>
                <%--                            <option value="${teacher.uid}">${teacher.name}</option>--%>
                <%--                        </c:forEach>--%>
                <%--                    </select>--%>
                <%--                </div>--%>
                <div class="clearfix">
                    <button type="submit" class="btn btn-primary">添 加</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script>

    $(function () {
        $("#cname").on("blur", function () {
            $.ajax({
                type: "get", //请求方式
                url: "/classes/ajaxchkname", // 请求url
                data: {cname:$("#cname").val()}, // 请求参数，json格式写法
                dataType: "json",  // 默认值为text文本
                success: function (msg) {  // 成功返回，接收数据结果并处理
                    console.log(msg);
                    console.log(msg.info);
                }
            });
        })
    });


    // js方式使用Ajax
    // function chknamebyajax(cname) {
    //     if (cname == "") return false;
    //     // 声明Ajax对象
    //     var xmlHttp = false;
    //     // 根据不同的浏览器进行创建（IE10之后不需要了）
    //     if (window.ActiveXObject) {
    //         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    //     } else if (window.XMLHttpRequest) {
    //         xmlHttp = new XMLHttpRequest();
    //     }
    //     if (!xmlHttp) {
    //         console.log("无法创建XMLHttpRequest实例");
    //         return false;
    //     }
    //     // 匿名回调函数，匹配Ajax对象的onreadystatechange事件，
    //     //  查看readystate参数值的改变（0--4）
    //     // 当前代表需要在Ajax对象调用send函数之后才会执行
    //     xmlHttp.onreadystatechange = function (ev) {
    //         // readyState状态码的值为4代表服务器端处理完毕并返回结果
    //         if (xmlHttp.readyState == 4) {
    //             // http协议的状态码
    //             if (xmlHttp.status == 200) {
    //                 var json = eval("(" + xmlHttp.responseText + ")");
    //                 console.log(json);
    //                 console.log(json.info);
    //             } else {
    //                 console.log("您所请求的页面有异常");
    //             }
    //         }
    //     };
    //     // 注意：这里是模拟get请求
    //     xmlHttp.open("GET", "/classes/ajaxchkname?cname=" + cname, true);
    //     xmlHttp.send(null);
    // }


    function chkform(argform) {
        if ((argform.cgrade.value) == "" || isNaN(argform.cgrade.value)) {
            $(argform.cgrade).next("div").html("班级的年级只能为整数数字");
            return false;
        }
        return true;
    }
</script>
</body>

</html>